<template>
  <el-dialog
    v-model="visible"
    title="人脸注册 - 实名认证"
    width="900px"
    :before-close="handleClose"
    destroy-on-close
    class="face-register-modal"
  >
    <div class="register-modal">
      <!-- 用户信息展示 -->
      <div class="user-info-section">
        <h4>👤 当前用户信息</h4>
        <div v-if="isUserLoggedIn" class="user-info-card">
          <div class="user-avatar">
            <el-avatar 
              :size="50" 
              :src="currentUser.avatar" 
              :icon="User"
            />
          </div>
          <div class="user-details">
            <div class="user-name">
              <el-icon><User /></el-icon>
              <span>{{ currentUser.nickname || '未设置昵称' }}</span>
            </div>
            <div class="user-id">
              <span class="label">用户ID:</span>
              <el-tag type="primary" size="small">{{ currentUser.id }}</el-tag>
            </div>
            <div class="auth-status">
              <span class="label">认证状态:</span>
              <el-tag :type="isAuthenticated ? 'success' : 'warning'" size="small">
                {{ isAuthenticated ? '已认证' : '未认证' }}
              </el-tag>
            </div>
          </div>
        </div>
        <div v-else class="user-info-empty">
          <el-alert
            title="用户未登录"
            description="请先登录系统后再进行人脸注册"
            type="warning"
            :closable="false"
            show-icon
          />
        </div>
      </div>

      <!-- 配置选择 -->
      <div class="config-section">
        <h4>⚙️ 人脸配置</h4>
        <el-form :model="registerForm" label-width="100px">
          <el-form-item label="配置选择" required>
            <el-select
              v-model="registerForm.configId"
              placeholder="请选择人脸识别配置"
              style="width: 100%"
              :loading="configLoading"
            >
              <el-option
                v-for="config in configList"
                :key="config.id"
                :label="config.name"
                :value="config.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="用户组ID">
            <el-input
              v-model="registerForm.groupId"
              placeholder="默认为用户ID分组"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>

      <!-- 摄像头区域 -->
      <div class="camera-section">
        <h4>📷 人脸拍摄</h4>
        
        <!-- 安全检测控制 -->
        <div class="security-controls">
          <div class="control-item">
            <el-switch
              v-model="livenessDetection.isActive"
              active-text="活体检测"
              inactive-text="关闭活体检测"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
            <el-tooltip content="开启后需要眨眼验证，提高安全性" placement="top">
              <el-icon class="info-icon"><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          
          <div v-if="livenessDetection.isActive" class="liveness-status">
            <span class="status-text">眨眼进度:</span>
            <el-progress
              :percentage="(livenessDetection.blinkCount / livenessDetection.requiredBlinks) * 100"
              :stroke-width="8"
              :show-text="false"
              status="success"
            />
            <span class="blink-count">{{ livenessDetection.blinkCount }}/{{ livenessDetection.requiredBlinks }}</span>
          </div>
        </div>
        
        <div class="camera-container">
          <div class="camera-preview">
            <!-- 摄像头状态指示器 -->
            <div :class="['camera-status', cameraActive ? 'active' : 'inactive']">
              <div class="camera-status-dot"></div>
              {{ cameraActive ? '摄像头已开启 - 请保持人脸在画面中央' : '摄像头已关闭' }}
            </div>
            
            <!-- 质量检测提示 -->
            <div v-if="cameraActive" class="quality-tips">
              <div class="tip-item">
                <el-icon><Sunny /></el-icon>
                <span>确保光线充足</span>
              </div>
              <div class="tip-item">
                <el-icon><View /></el-icon>
                <span>保持人脸清晰</span>
              </div>
              <div class="tip-item">
                <el-icon><Position /></el-icon>
                <span>正对摄像头</span>
              </div>
            </div>
            
            <!-- 人脸检测框 -->
            <div v-if="cameraActive" class="face-detection-guide">
              <div class="face-frame">
                <div class="corner top-left"></div>
                <div class="corner top-right"></div>
                <div class="corner bottom-left"></div>
                <div class="corner bottom-right"></div>
                <div class="face-guide-text">
                  {{ livenessDetection.isActive ? '请将人脸对准此区域并眨眼' : '请将人脸对准此区域' }}
                </div>
              </div>
            </div>
            
            <video
              ref="videoRef"
              v-show="cameraActive"
              autoplay
              playsinline
              class="camera-video"
            ></video>
            <canvas
              ref="canvasRef"
              v-show="false"
              class="camera-canvas"
            ></canvas>
            
            <!-- 拍摄的照片预览 -->
            <div v-if="capturedImageUrl && !cameraActive" class="captured-preview">
              <img :src="capturedImageUrl" alt="拍摄的照片" class="captured-image" />
              <div class="captured-overlay">
                <el-button type="primary" size="small" @click="startCamera">
                  <el-icon><VideoCamera /></el-icon>
                  重新拍照
                </el-button>
              </div>
            </div>
            
            <div v-if="!cameraActive && !capturedImageUrl" class="camera-placeholder">
              <el-icon size="48"><Camera /></el-icon>
              <p>点击开启摄像头开始人脸注册</p>
              <p class="placeholder-tip">请确保光线充足，人脸清晰可见</p>
            </div>
          </div>
          
          <div class="camera-controls">
            <el-button
              v-if="!cameraActive"
              type="primary"
              @click="startCamera"
              :loading="cameraLoading"
            >
              <el-icon><VideoCamera /></el-icon>
              开启摄像头
            </el-button>
            <template v-else>
              <el-button
                type="success"
                @click="capturePhoto"
                :disabled="!cameraActive"
              >
                <el-icon><Camera /></el-icon>
                拍照
              </el-button>
              <el-button
                type="danger"
                @click="stopCamera"
              >
                <el-icon><Close /></el-icon>
                关闭摄像头
              </el-button>
            </template>
          </div>
        </div>
      </div>

      <!-- 注册操作 -->
      <div class="action-section">
        <h4>🎯 人脸注册</h4>
        <div class="action-description">
          <el-alert
            title="注册说明"
            description="人脸注册成功后将自动完成实名认证，请确保拍摄的照片清晰且为本人真实照片"
            type="info"
            :closable="false"
            show-icon
          />
        </div>
        <div class="action-buttons">
          <el-button
            type="primary"
            size="large"
            @click="handleRegister"
            :disabled="!canRegister"
            :loading="registerLoading"
          >
            <el-icon><UserFilled /></el-icon>
            开始人脸注册
          </el-button>
        </div>
      </div>

      <!-- 注册结果 -->
      <div class="result-section" v-if="registerResult">
        <h4>📊 注册结果</h4>
        <div class="result-content">
          <div v-if="registerResult.success" class="result-success">
            <el-alert
              title="注册成功"
              type="success"
              :closable="false"
              show-icon
            >
              <template #default>
                <div class="result-details">
                  <div class="result-item">
                    <span class="result-label">用户ID:</span>
                    <el-tag type="primary">{{ registerResult.data.userId }}</el-tag>
                  </div>
                  <div class="result-item">
                    <span class="result-label">人脸Token:</span>
                    <el-tag type="success">{{ registerResult.data.faceToken?.substring(0, 16) }}...</el-tag>
                  </div>
                  <div v-if="registerResult.data.processTime" class="result-item">
                    <span class="result-label">处理时间:</span>
                    <el-tag type="info">{{ registerResult.data.processTime }}ms</el-tag>
                  </div>
                  <div class="result-item">
                    <span class="result-label">认证状态:</span>
                    <el-tag type="success">已完成实名认证</el-tag>
                  </div>
                </div>
              </template>
            </el-alert>
          </div>
          <div v-else class="result-error">
            <el-alert
              title="注册失败"
              :description="registerResult.message"
              type="error"
              :closable="false"
              show-icon
            />
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="clearResult" v-if="registerResult">
          清除结果
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { 
  Camera, 
  VideoCamera, 
  Close, 
  User, 
  UserFilled,
  QuestionFilled,
  Sunny,
  View,
  Position
} from '@element-plus/icons-vue'
import { useUserStore } from '@/store/modules/user'
import {
  registerFaceBase64,
  type FaceRegisterReqVO,
  type FaceRegisterRespVO
} from '@/api/infra/face'
import { updateUserRealNameStatus } from '@/api/system/user'

// Props
interface Props {
  modelValue: boolean
  configList: any[]
  configLoading: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  configList: () => [],
  configLoading: false
})

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  success: []
}>()

const message = useMessage()
const userStore = useUserStore()

// 弹窗显示状态
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 当前登录用户信息
const currentUser = computed(() => userStore.getUser)
const isUserLoggedIn = computed(() => userStore.getIsSetUser && currentUser.value.id > 0)
const isAuthenticated = computed(() => currentUser.value?.faceToken ? true : false) // 基于faceToken判断认证状态

// 注册表单
const registerForm = ref({
  configId: undefined,
  userId: '',
  groupId: ''
})

// 摄像头相关
const videoRef = ref<HTMLVideoElement>()
const canvasRef = ref<HTMLCanvasElement>()
const cameraActive = ref(false)
const cameraLoading = ref(false)
const mediaStream = ref<MediaStream | null>(null)
const capturedImageUrl = ref('')
const capturedImageBase64 = ref('')

// 注册相关
const registerLoading = ref(false)
const registerResult = ref<{ success: boolean; data?: any; message?: string } | null>(null)

// 计算属性
const canRegister = computed(() => {
  return registerForm.value.configId && capturedImageBase64.value && isUserLoggedIn.value
})

// 开启摄像头
const startCamera = async () => {
  try {
    cameraLoading.value = true
    const stream = await navigator.mediaDevices.getUserMedia({ 
      video: { 
        width: { ideal: 640 },
        height: { ideal: 480 },
        facingMode: 'user'
      } 
    })
    
    if (videoRef.value) {
      videoRef.value.srcObject = stream
      mediaStream.value = stream
      cameraActive.value = true
      capturedImageUrl.value = ''
      capturedImageBase64.value = ''
    }
  } catch (error) {
    console.error('开启摄像头失败:', error)
    message.error('无法访问摄像头，请检查设备权限')
  } finally {
    cameraLoading.value = false
  }
}

// 关闭摄像头
const stopCamera = () => {
  if (mediaStream.value) {
    mediaStream.value.getTracks().forEach(track => track.stop())
    mediaStream.value = null
  }
  cameraActive.value = false
}

// 人脸质量检测
const checkFaceQuality = (imageData: ImageData): { isValid: boolean; score: number; message: string } => {
  const { data, width, height } = imageData
  
  // 计算图像亮度
  let totalBrightness = 0
  let pixelCount = 0
  
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i]
    const g = data[i + 1]
    const b = data[i + 2]
    const brightness = (r * 0.299 + g * 0.587 + b * 0.114)
    totalBrightness += brightness
    pixelCount++
  }
  
  const avgBrightness = totalBrightness / pixelCount
  
  // 检查亮度是否合适
  if (avgBrightness < 50) {
    return { isValid: false, score: 0.3, message: '光线过暗，请调整光线' }
  }
  if (avgBrightness > 200) {
    return { isValid: false, score: 0.4, message: '光线过亮，请调整光线' }
  }
  
  // 计算图像清晰度（简单的边缘检测）
  let edgeCount = 0
  for (let y = 1; y < height - 1; y++) {
    for (let x = 1; x < width - 1; x++) {
      const idx = (y * width + x) * 4
      const current = data[idx]
      const right = data[idx + 4]
      const bottom = data[idx + width * 4]
      
      if (Math.abs(current - right) > 30 || Math.abs(current - bottom) > 30) {
        edgeCount++
      }
    }
  }
  
  const edgeRatio = edgeCount / (width * height)
  
  if (edgeRatio < 0.02) {
    return { isValid: false, score: 0.5, message: '图像模糊，请保持稳定' }
  }
  
  const qualityScore = Math.min(1.0, (avgBrightness / 128) * (edgeRatio / 0.05))
  
  return {
    isValid: qualityScore > 0.6,
    score: qualityScore,
    message: qualityScore > 0.8 ? '图像质量优秀' : qualityScore > 0.6 ? '图像质量良好' : '图像质量较差'
  }
}

// 活体检测相关
const livenessDetection = ref({
  isActive: false,
  blinkCount: 0,
  requiredBlinks: 2,
  lastBlinkTime: 0,
  eyeClosedFrames: 0,
  faceMovementHistory: [] as Array<{ x: number; y: number; timestamp: number }>
})

// 简单的眨眼检测（基于亮度变化）
const detectBlink = (imageData: ImageData): boolean => {
  const { data, width, height } = imageData
  
  // 检测眼部区域的亮度变化（简化版本）
  const eyeRegionY = Math.floor(height * 0.3)
  const eyeRegionHeight = Math.floor(height * 0.2)
  
  let eyeRegionBrightness = 0
  let pixelCount = 0
  
  for (let y = eyeRegionY; y < eyeRegionY + eyeRegionHeight; y++) {
    for (let x = 0; x < width; x++) {
      const idx = (y * width + x) * 4
      const brightness = (data[idx] * 0.299 + data[idx + 1] * 0.587 + data[idx + 2] * 0.114)
      eyeRegionBrightness += brightness
      pixelCount++
    }
  }
  
  const avgEyeBrightness = eyeRegionBrightness / pixelCount
  
  // 简单的眨眼检测逻辑
  if (avgEyeBrightness < 80) {
    livenessDetection.value.eyeClosedFrames++
  } else {
    if (livenessDetection.value.eyeClosedFrames > 3) {
      livenessDetection.value.blinkCount++
      livenessDetection.value.lastBlinkTime = Date.now()
      livenessDetection.value.eyeClosedFrames = 0
      return true
    }
    livenessDetection.value.eyeClosedFrames = 0
  }
  
  return false
}

// 拍照（增强版本，包含质量检测和活体检测）
const capturePhoto = () => {
  if (!videoRef.value || !canvasRef.value) return
  
  const video = videoRef.value
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')
  
  if (!ctx) return
  
  // 设置画布尺寸
  canvas.width = video.videoWidth
  canvas.height = video.videoHeight
  
  // 绘制视频帧到画布
  ctx.drawImage(video, 0, 0)
  
  // 获取图像数据进行质量检测
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
  const qualityResult = checkFaceQuality(imageData)
  
  if (!qualityResult.isValid) {
    message.warning(`图像质量检测失败: ${qualityResult.message}`)
    return
  }
  
  // 检查活体检测
  if (livenessDetection.value.isActive && livenessDetection.value.blinkCount < livenessDetection.value.requiredBlinks) {
    message.warning(`活体检测未通过，请眨眼 ${livenessDetection.value.requiredBlinks - livenessDetection.value.blinkCount} 次`)
    return
  }
  
  // 获取图片数据
  capturedImageUrl.value = canvas.toDataURL('image/jpeg', 0.8)
  capturedImageBase64.value = capturedImageUrl.value.split(',')[1]
  
  // 关闭摄像头
  stopCamera()
  
  message.success(`照片拍摄成功 (质量评分: ${(qualityResult.score * 100).toFixed(0)}%)`)
}

// 处理人脸注册
const handleRegister = async () => {
  if (!canRegister.value) {
    message.warning('请先完成人脸拍摄')
    return
  }
  
  try {
    registerLoading.value = true
    
    const requestData: FaceRegisterReqVO = {
      configId: registerForm.value.configId!,
      userId: currentUser.value.id,
      groupId: registerForm.value.groupId || currentUser.value.id.toString(),
      image: capturedImageBase64.value
    }
    
    const response = await registerFaceBase64(requestData)
    
    // 人脸注册成功后，自动更新用户实名认证状态
    try {
      await updateUserRealNameStatus({
        id: currentUser.value.id,
        realNameStatus: 1, // 1表示已认证
        faceToken: response.faceToken
      })
      
      registerResult.value = {
        success: true,
        data: {
          ...response,
          realNameStatus: 1,
          realNameTime: new Date().toISOString()
        }
      }
      
      message.success('人脸注册成功，实名认证已完成')
    } catch (updateError) {
      console.warn('更新实名认证状态失败:', updateError)
      registerResult.value = {
        success: true,
        data: response
      }
      message.success('人脸注册成功')
    }
    
    emit('success')
    
    // 认证状态会通过用户信息的faceToken自动更新
    
  } catch (error: any) {
    console.error('人脸注册失败:', error)
    registerResult.value = {
      success: false,
      message: error.message || '注册失败，请重试'
    }
    message.error('人脸注册失败')
  } finally {
    registerLoading.value = false
  }
}

// 清除结果
const clearResult = () => {
  registerResult.value = null
  capturedImageUrl.value = ''
  capturedImageBase64.value = ''
}

// 关闭弹窗
const handleClose = () => {
  stopCamera()
  clearResult()
  visible.value = false
}

// 监听弹窗显示状态
watch(visible, (newVal) => {
  if (newVal && isUserLoggedIn.value) {
    // 自动填充用户信息
    registerForm.value.userId = currentUser.value.id.toString()
    registerForm.value.groupId = currentUser.value.id.toString()
    
    // 自动选择第一个配置
    if (props.configList.length > 0) {
      registerForm.value.configId = props.configList[0].id
    }
  }
})

// 组件卸载时清理资源
onUnmounted(() => {
  stopCamera()
})
</script>

<style scoped>
.face-register-modal {
  --el-dialog-border-radius: 16px;
}

.register-modal {
  padding: 8px;
}

/* 用户信息区域 */
.user-info-section {
  margin-bottom: 24px;
}

.user-info-section h4 {
  margin-bottom: 16px;
  color: #303133;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-info-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
  color: white;
  transition: all 0.3s ease;
}

.user-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.3);
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.user-id, .auth-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.user-id .label, .auth-status .label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

/* 配置区域 */
.config-section {
  margin-bottom: 24px;
}

.config-section h4 {
  margin-bottom: 16px;
  color: #303133;
  font-weight: 600;
}

/* 摄像头区域 */
.camera-section {
  margin-bottom: 24px;
}

.camera-section h4 {
  margin-bottom: 16px;
  color: #303133;
  font-weight: 600;
}

/* 安全检测控制 */
.security-controls {
  margin-bottom: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.info-icon {
  color: #909399;
  cursor: help;
}

.liveness-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #e8f5e8;
  border-radius: 6px;
  border: 1px solid #b3d8b3;
}

.status-text {
  font-size: 14px;
  color: #67c23a;
  font-weight: 500;
  min-width: 80px;
}

.blink-count {
  font-size: 14px;
  color: #67c23a;
  font-weight: 600;
  min-width: 30px;
}

/* 质量检测提示 */
.quality-tips {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.tip-item .el-icon {
  font-size: 14px;
  color: #67c23a;
}

.camera-container {
  border: 2px dashed #dcdfe6;
  border-radius: 12px;
  padding: 20px;
  background: #fafafa;
}

.camera-preview {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-placeholder {
  text-align: center;
  color: #909399;
}

.camera-placeholder .el-icon {
  color: #c0c4cc;
  margin-bottom: 12px;
}

.camera-placeholder p {
  margin: 8px 0;
  font-size: 16px;
}

.placeholder-tip {
  font-size: 14px;
  color: #c0c4cc;
}

.camera-status {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.7);
  color: white;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  z-index: 10;
}

.camera-status.active {
  background: rgba(67, 160, 71, 0.9);
}

.camera-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* 人脸检测引导框 */
.face-detection-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.face-frame {
  position: relative;
  width: 200px;
  height: 240px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
}

.corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid #409eff;
}

.corner.top-left {
  top: -3px;
  left: -3px;
  border-right: none;
  border-bottom: none;
}

.corner.top-right {
  top: -3px;
  right: -3px;
  border-left: none;
  border-bottom: none;
}

.corner.bottom-left {
  bottom: -3px;
  left: -3px;
  border-right: none;
  border-top: none;
}

.corner.bottom-right {
  bottom: -3px;
  right: -3px;
  border-left: none;
  border-top: none;
}

.face-guide-text {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  white-space: nowrap;
}

.captured-preview {
  position: relative;
  width: 100%;
  height: 100%;
}

.captured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.captured-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.camera-controls {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.camera-controls .el-button {
  min-width: 120px;
  height: 40px;
  font-weight: 500;
  border-radius: 20px;
}

/* 操作区域 */
.action-section {
  margin-bottom: 24px;
}

.action-section h4 {
  margin-bottom: 16px;
  color: #303133;
  font-weight: 600;
}

.action-description {
  margin-bottom: 16px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.action-buttons .el-button {
  min-width: 160px;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 24px;
}

/* 结果区域 */
.result-section {
  margin-bottom: 24px;
}

.result-section h4 {
  margin-bottom: 16px;
  color: #303133;
  font-weight: 600;
}

.result-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.result-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-label {
  font-weight: 500;
  color: #606266;
  min-width: 80px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-info-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .camera-preview {
    height: 280px;
  }
  
  .face-frame {
    width: 160px;
    height: 200px;
  }
}
</style>